<template>
  <div class="image-wrap">
    <img v-if="src" class="image-wrap-img" @click="clickHandler" :src="src" :class="clas" :style="style"/>
  </div>
</template>

<script>
import refreshMixin from "@/package/widget/mixins/refreshMixin";

export default {
  name: 'index',
  cnName: '图片',
  mixins: [refreshMixin],
  props: {
    option: Object
  },
  data() {
    return {}
  },
  methods: {},
  computed: {
    src() {
      const attribute = this.option.attribute
      return attribute.src
    },
    clas() {
      return `img-${this.option.attribute.fit}`
    },
    style() {
      const rtn = {
        background: this.option.attribute.bgColor
      }

      return rtn
    }
  }
}
</script>

<style lang="less" scoped>
.image-wrap {
  position: relative;
  width: 100%;
  height: 100%;

  &-img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    position: relative;
    z-index: inherit;
  }

  .img{
    &-fill {
      object-fit: fill;
    }
    &-contain {
      object-fit: contain;
    }
    &-cover {
      object-fit: cover;
    }
    &-none {
      object-fit: none;
    }
    &-scale-down {
      object-fit: scale-down;
    }
  }
}
</style>
